<template>
  <div class="page-container">
    <div class="toolbar">
      <el-row>
        <el-tabs type="border-card">
          <el-tab-pane label="基本信息">
            <el-form
              :inline="true"
              :model="dataForm"
              label-width="130px"
              style="text-align:left;"
              ref="dataForm"
              :rules="dataFormRules"
              class="form"
            >
              <el-row style="display:flex;" class="searchDialog-input">
                <el-divider content-position="center">
                  <span style="font-size:16px;font-weight:800">基本信息</span>
                </el-divider>
              </el-row>
              <el-row style="display:flex;" class="searchDialog-input">
                <el-form-item label="证书名称：" prop="certificateName">
                  <el-input v-model="dataForm.certificateName" :disabled="isView == 1" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="证书编号：" prop="certificateNumber">
                  <el-input v-model="dataForm.certificateNumber"  :disabled="isView == 1" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="签发机构：" prop="issuingAuthority">
                  <el-input v-model="dataForm.issuingAuthority"  :disabled="isView == 1" placeholder="请输入"></el-input>
                </el-form-item>
              </el-row>
              <el-row style="display:flex;" class="searchDialog-input">
                <el-form-item label="签发日期：" prop="issueDate">
                  <el-date-picker
                    style="width:180px;"
                    v-model="dataForm.issueDate"
                    placeholder="请输入签发日期"
                    :disabled="isView == 1"
                    type="date"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="截止日期：" prop="invalidDate">
                  <el-date-picker
                    style="width:180px;"
                    v-model="dataForm.invalidDate"
                    placeholder="请输入截止日期"
                    :disabled="isView == 1"
                    type="date"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="最新年检时间：" prop="yearlyInspection">
                  <el-date-picker
                    style="width:180px;"
                    v-model="dataForm.yearlyInspection"
                    placeholder="请输入最新年检时间"
                    :disabled="isView == 1"
                    type="date"
                  ></el-date-picker>
                </el-form-item>
              </el-row>
              <el-row style="display:flex;" class="searchDialog-input">
                <el-form-item label="附件：" prop="enclosureUrl">
                  <el-upload
                    style="width:180px;"
                    class="avatar-uploader"
                    :action="imgUpload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccessCardTwo"
                    :before-upload="beforeAvatarUploadCardTwo"
                    :disabled="isView == 1"
                  >
                    <img v-if="dataForm.enclosureUrl" :src="dataForm.enclosureUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-row>
            </el-form>
            <div class="tool-wrap">
              <div class="left-area">
                <el-button-group>
                  <el-button type="primary" size="small" @click="submitForm()" v-if="isView != 1">保存</el-button>
                  <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
                </el-button-group>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  //2.2 数据初始化区
  data() {
    return {
      //2.2.1 公共数据初始化
      searchSize: "mini",
      imgUpload: this.utils.imgUploadUrl,
      // 2.2.2 form 表单数据初始化
      dataForm: {
        qualificationsType: null,
        certificateName: null,
        certificateNumber: null,
        issuingAuthority: null,
        issueDate: null,
        invalidDate: null,
        yearlyInspection: null,
        qualified: null,
        unqualifiedReason: null,
        enclosureName: null,
        enclosureUrl: null,
        productCode: null,
        productName: null,
      },
      //trigger 为blur 表示丢失焦点;为change 表示值发生变化;
      dataFormRules: {
        certificateName: [
          { required: true, message: "请输入证书名称", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
        ],
        certificateNumber: [
          { required: true, message: "请输入证书编号", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
        ],
      },
      productCode: this.$route.params.productCode,
      isView: this.$route.params.isView,
    }; //return 完结;
  }, //data()方法 完结;

  //2.3 Vue 方法区
  methods: {
    //2.请求列表数据
    getDetail() {
      let this_ = this;
      let params = {
        productCode: this_.productCode,
      };
      this.utils.request.queryProductQualificationsInfo(params, function (res) {
        if (res.code === "0000" && res.data) {
          this_.dataForm = res.data;
        }
      });
    },

    submitForm: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.editLoading = true;
          let params = Object.assign({}, this.dataForm);
          params.productCode = this.productCode;
          this.utils.request.saveOrUpdateProductQualificationsInfo(
            params,
            (res) => {
              if (res.code == "0000") {
                this.$message({ message: "操作成功！", type: "success" });
                this.getDetail();
              } else {
                this.$message({
                  message: "操作失败, " + data.msg,
                  type: "error",
                });
              }
            }
          );
        }
      });
    },
    handleAvatarSuccessCardTwo(res, file) {
      this.dataForm.enclosureUrl = file.response.data.imgUrl;
      if (file.name && file.name.indexOf(".") != -1) {
        this.dataForm.enclosureName = file.name.split(".")[0];
      }
    },
    beforeAvatarUploadCardTwo(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    //==========2.3.1 JavaScript 自定义方法区==========
  },
  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    if (this.productCode) {
      this.getDetail();
    }
  },
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
